/*
 * @Author: chenzhinjian
 * @Date: 2019-01-19 17:19:43
 * @LastEditTime: 2019-03-04 09:07:19
 * @Description: 
 */
// <div class="ifast-carousel-box">
//     <div class="ifast-carousel-arrow-left"></div>
//     <div class="ifast-list">
//         <div class="ifast-item">
//              <div class="ifast-cell"></div>
//         </div>
//         <div class="ifast-item-cp">
//         </div>
//         
//     </div>
//     <div class="ifast-carousel-arrow-right"></div>
//     <ul class="ifast-carousel-dos">
//         <li class="ivu-carousel-active"></li>
//         <li></li>
//         <li></li>
//         <li></li>
//     </ul>
// </div>
$grid-prefix: $css-prefix;
.#{$grid-prefix}carousel-box{
  overflow: hidden;
  position: relative;
  // background-color: red;
  .#{$grid-prefix}carousel-arrow-left,.#{$grid-prefix}carousel-arrow-right{
    display: inline-block;
    position: absolute;
    cursor: pointer;
    top: 50%;
    width: px-or-rem(36);
    height: px-or-rem(36);
    border-radius: 100%;
    background-color: rgba($color: #000000, $alpha:0.2);
    text-align: center;
    line-height:px-or-rem(36);
    @include translate3d(0,-50%,0);
    &:hover{
      background-color: rgba($color: #000000, $alpha:0.5);
    }
  };
  .#{$grid-prefix}carousel-arrow-left{
    left: px-or-rem(10);
    z-index: 4;
  };
  .#{$grid-prefix}carousel-arrow-right{
    right: px-or-rem(10);
    z-index: 4;
  };
  .#{$grid-prefix}list{
    width: 100%;
    overflow: hidden;
    position: relative;
    
    .#{$grid-prefix}item,.#{$grid-prefix}item-cp{
      widows: 100%;
      overflow: hidden;
      .#{$grid-prefix}cell{
        float: left;
        @include clearfix();
      }
      
    }
    .#{$grid-prefix}item{
      position: relative;
      z-index: 2;
      // background-color:yellowgreen;
    }
    .#{$grid-prefix}item-cp{
      position: absolute;
      left: px-or-rem(0);
      top: px-or-rem(0);
      z-index: 2;
      // background-color: red;
    }
    .heightenZindex{
      z-index:3
    }
  }
  .#{$grid-prefix}carousel-dos{
    position: absolute;
    display: inline-block;
    bottom: px-or-rem(8);
    left: 50%;
    @include translate3d(-50%,0,0);
    z-index: 4;
    cursor: pointer;
    li{
      display: inline-block;
      float: left;
      height: px-or-rem(5);
      width: px-or-rem(20);
      margin-left: px-or-rem(5);
      background-color: rgba($color: white, $alpha: 0.2);
      @include transition(all $transition-time $ease-in-out);
    }
    .active{
      background-color: rgba($color: white, $alpha: 0.6);
    }
    .circularDoc{
      border-radius: 100%;
      width: px-or-rem(5);
    }
  }
}
.#{$grid-prefix}arrow-notArrow{
  .#{$grid-prefix}carousel-arrow-left,.#{$grid-prefix}carousel-arrow-right{
    opacity: 0;
  };
}
.#{$grid-prefix}arrow-hover{
  .#{$grid-prefix}carousel-arrow-left,.#{$grid-prefix}carousel-arrow-right{
    opacity: 0;
    display: none;
  };
  &:hover{
    .#{$grid-prefix}carousel-arrow-left,.#{$grid-prefix}carousel-arrow-right{
      opacity: 1;
      display: block;
    };
  }
}
.#{$grid-prefix}arrow-always{
  .#{$grid-prefix}carousel-arrow-left,.#{$grid-prefix}carousel-arrow-right{
    opacity: 1;
  };
}